<template>
  <div class="page_root" :key="queryUpdateFlag" data-page-name="行动项任务管理" data-page-identification="b_i0ulzydmfj">
    <a-spin :spinning="pageLoading.loading" :tip="pageLoading.tip">
      <!-- begin vid_wpvhspioao 自定义模板_dpi21hcb5d -->
      <!--审批详情-->
      <a-modal @cancel="statuState.visible = false" centered :visible="statuState.visible" title="审批详情" :footer="null" :body-style="{ maxHeight: '700px', overflowY: 'auto' }" width="400px">
        <div class="status-item" v-for="(item, index) in statuState.list">
          <div class="title-new-status">
            <div class="left-title"
            >审批类型:<span class="weight-status-new">{{ item.processName }} </span></div
            >
            <div class="right-title"
            >审批提交时间:<span class="weight-status-new">{{ item.createdDate }} </span></div
            >
          </div>
          <a-steps class="status-step" direction="vertical">
            <a-step
              v-for="(inside, index) in item.processTaskList"
              :title="inside.nodeMessage"
              :description="inside.taskName + ':' + inside.assignUserName"
              :status="getIconStatus(inside.nodeStatus)"
            />
          </a-steps>
        </div>
      </a-modal>

      <!--审批详情-->
      <a-modal :visible="urgeState.visible" title="请确认" @ok="confirmUrge" centered @cancel="urgeState.visible = false"> 是否对该行动项任务进行催办 </a-modal>
      <!--催办-->
      <a-modal :visible="scoreState.visible" title="加减分详情" :footer="null" width="1000px" @cancel="scoreState.visible = false" centered :body-style="{ paddingTop: '16px' }">
        <div class="score-title-first">
          <ExclamationCircleOutlined style="color: orange; margin-right: 8px" />已结算的任务不支持通过编辑修改是否扣分，请联系相关领导通过员工绩效页面做修正加减分处理
        </div>
        <div class="score-table" v-if="scoreState.type === '项目总监'">
          <div class="score-title"
          >项目总监加减分总和：<span
            :class="[
                                calculateTotalTaskPoints(scoreState.scoreData) >= 0 ? 'score-num' : 'score-num-red'
                            ]"
          >{{ calculateTotalTaskPoints(scoreState.scoreData) }}</span
          >
          </div>

          <div v-for="(item, index) in scoreState.scoreData" :key="index" style="margin-bottom: 17px">
            <div class="score-month"
            >{{ item.month }}月绩效结算明细
              <span class="month-score"
              >月度加减分总和：<span class="default-score">{{ getScore(item.data) }}</span></span
              >
            </div>
            <a-table :scroll="{ x: '700px', y: '200px' }" :columns="actionState.labelCoulmn" :dataSource="item.data" bordered :pagination="false" />
          </div>
        </div>
        <div class="score-table" v-if="scoreState.type === '项目经理'">
          <div class="score-title"
          >项目经理加减分总和：<span
            :class="[
                                calculateTotalTaskPoints(scoreState.scoreData) >= 0 ? 'score-num' : 'score-num-red'
                            ]"
          >{{ calculateTotalTaskPoints(scoreState.scoreData) }}</span
          >
          </div>
          <div v-for="(item, index) in scoreState.scoreData" :key="index" style="margin-bottom: 17px">
            <div class="score-month"
            >{{ item.month }}月绩效结算明细
              <span class="month-score"
              >月度加减分总和：<span class="default-score">{{ getScore(item.data) }}</span></span
              >
            </div>
            <a-table :scroll="{ x: '700px', y: '200px' }" :columns="actionState.labelCoulmn" :dataSource="item.data" bordered :pagination="false" />
          </div>
        </div>
        <div class="score-table" v-if="scoreState.type === '负责人'">
          <div class="score-title"
          >项目负责人和任务执行人加减分总和：<span
            :class="[
                                calculateTotalTaskPoints(scoreState.scoreData) >= 0 ? 'score-num' : 'score-num-red'
                            ]"
          >{{ calculateTotalTaskPoints(scoreState.scoreData) }}</span
          >
          </div>
          <div v-for="(item, index) in scoreState.scoreData" :key="index" style="margin-bottom: 17px">
            <div class="score-month"
            >{{ item.month }}月绩效结算明细
              <span class="month-score"
              >月度加减分总和：<span class="default-score">{{ getScore(item.data) }}</span></span
              >
            </div>
            <a-table :scroll="{ x: '700px', y: '200px' }" :columns="actionState.labelCoulmn" :dataSource="item.data" bordered :pagination="false" />
          </div>
        </div>
      </a-modal>
      <div class="top">
        <a-form>
          <a-row style="height: 40px">
            <a-col :span="5" style="height: 32px; margin-top: 16px">
              <a-form-item label="工厂/项目名称" :label-col="{ span: 8 }">
                <a-select
                  v-model:value="actionState.filter.projectTreeFormList"
                  show-search
                  style="width: 100%"
                  mode="multiple"
                  allow-clear
                  :options="actionState.searchList"
                  :field-names="{ label: 'projectName', value: 'projectId' }"
                  :filter-option="
                                        (input, option) => {
                                            return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                        }
                                    "
                  @focus="getSearchList"
                />
              </a-form-item>
            </a-col>
            <a-col :span="5" style="height: 32px; margin-top: 16px">
              <a-form-item label="计划结束时间" :label-col="{ span: 8 }">
                <a-date-picker style="width: 100%" v-model:value="actionState.filter.endTime" valueFormat="YYYY-MM-DD" />
              </a-form-item>
            </a-col>
            <a-col :span="5" style="height: 32px; margin-top: 16px">
              <a-form-item label="任务负责人" :label-col="{ span: 8 }">
                <a-select
                  v-model:value="actionState.filter.taskOwner"
                  allowClear
                  showSearch
                  :options="peopleList"
                  :field-names="{ label: 'label', value: 'value' }"
                  :filter-option="
                                        (input, option) => {
                                            return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                        }
                                    "
                />
              </a-form-item>
            </a-col>
            <a-col :span="5" style="height: 32px; margin-top: 16px">
              <a-form-item label="任务状态" :label-col="{ span: 8 }">
                <a-select
                  v-model:value="actionState.filter.taskStatusList"
                  mode="multiple"
                  :maxTagCount="1"
                  showArrow="true"
                  allowClear
                  showSearch
                  :options="[
                                        { label: '未启动', value: '未启动' },
                                        { label: '进行中', value: '进行中' },
                                        { label: '完成', value: '完成' },
                                        { label: '延期', value: '延期' },
                                        { label: '延期完成', value: '延期完成' },
                                        { label: '审批中', value: '审批中' }
                                    ]"
                />
              </a-form-item>
            </a-col>

            <a-col :span="4" style="height: 32px; margin-top: 16px">
              <a-space size="middle" style="margin-left: 16px">
                <a-button type="primary" class="mr16 ml10 task-fill-btn" @click="getAction"> 查询 </a-button>
                <a-button class="task-no-btn" type="primary" ghost @click="reset"> 重置 </a-button>
              </a-space>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <div class="bottom-table">
        <div class="milepost-title">
          <div style="width: 50%; margin-left: 8px">行动项任务列表</div>
          <div
          ><a-button type="ghost" style="color: #3875ff" @click="handlerAddAction">
            <template #icon><PlusOutlined /></template>
            新建</a-button
          ></div
          >
        </div>
        <a-table
          bordered
          rowKey="taskId"
          :loading="actionState.tableLoading"
          :columns="actionState.columns"
          :data-source="actionState.dataList"
          :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)"
          :scroll="{ x: scrollX, y: '550px' }"
          @resizeColumn="handleTaskResizeColumn"
          :pagination="pagination"
          :total="pagination.total"
        >
          <template #bodyCell="{ column, record, text }">
            <template v-if="column.dataIndex === 'projectNames'">
              <a-tooltip placement="top" :overlayStyle="standardStyle" color="#fff">
                <template #title>
                  <p v-for="(item, index) in handlerGetSpace(record.projectNames)" :key="index" style="color: #262626; margin: 0">{{ item }}</p>
                </template>
                {{ text }}
              </a-tooltip>
            </template>
            <!--                                新-任务进度-->
            <template v-if="column.dataIndex === 'taskSchedule'">
              <a-progress
                :percent="record.taskSchedule"
                status="active"
                @click="
                                    changeTaskSchedule(
                                        record.finishPermission,
                                        record.taskSchedule,
                                        record.taskId,
                                        record.taskStatus
                                    )
                                "
              />
            </template>
            <!--                                end新-任务进度-->
            <!-- 新-审核标准字段 -->

            <!-- 审核标准 -->
            <template v-if="column.dataIndex === 'unclosedRiskNumber' || column.dataIndex === 'riskNumber'">
              <a
                @click="
                                    handlerShowRisks(
                                        record.actionTaskId,
                                        column.dataIndex === 'unclosedRiskNumber' ? '未关闭' : '全部'
                                    )
                                "
              >
                {{ text }}
              </a>
            </template>
            <!--                          完成标准-->
            <template v-if="column.dataIndex === 'finishStandard'">
              <a-tooltip placement="top" :overlayStyle="standardStyle" color="#fff">
                <template #title>
                  <p v-for="(item, index) in handlerGetSpace(record.finishStandard)" :key="index" style="color: #262626; margin: 0">{{ item }}</p>
                </template>
                <div class="finish-standard">{{ text }}</div>
              </a-tooltip>
            </template>
            <!--                          完成标准-->
            <!-- 附件模板 -->

            <template v-if="column.dataIndex === 'milepostName'">
              {{ text }}
            </template>
            <!--                                SOP-->
            <!--                                SOP-->
            <!-- 完成标准 -->

            <!-- 倒计时 -->
            <template v-if="column.dataIndex === 'countDown'">
              <div class="count-down-content">
                <a-tooltip placement="top" :overlayStyle="standardStyle" color="#fff" v-if="shouldDisplayCountDownWithTooltip(record.labelList, '倒计时')[0]">
                  <template #title>
                    <div class="count-down-hover">
                      <p v-for="(item, index) in record.hoverLabelList" :key="index">{{
                          item
                        }}</p>
                    </div>
                  </template>
                  <div class="count-down"
                  >{{
                      splitStringByColon(
                        shouldDisplayCountDownWithTooltip(record.labelList, '倒计时')[1]
                      )[0]

                    }}:<span class="weight-num">{{
                        splitStringByColon(
                          shouldDisplayCountDownWithTooltip(record.labelList, '倒计时')[1]
                        )[1]
                      }}</span></div
                  >
                </a-tooltip>
                <div v-if="shouldDisplayCountDownWithTooltip(record.labelList, '延期')[0]" class="extension-color">
                  {{
                    splitStringByColon(
                      shouldDisplayCountDownWithTooltip(record.labelList, '延期')[1]
                    )[0]

                  }}:<span class="weight-num">{{
                    splitStringByColon(
                      shouldDisplayCountDownWithTooltip(record.labelList, '延期')[1]
                    )[1]
                  }}</span>
                </div>

                <div
                  v-if="shouldDisplayCountDownWithTooltip(record.labelList, '项目总监')[0]"
                  :class="{
                                        'all-group-no': hasHyphen(
                                            shouldDisplayCountDownWithTooltip(record.labelList, '项目总监')[1]
                                        ),
                                        'all-group-yes': hasPlus(
                                            shouldDisplayCountDownWithTooltip(record.labelList, '项目总监')[1]
                                        )
                                    }"
                  @click="showScore(record.projectDirectorLabelList, '项目总监')"
                >{{
                    splitStringByColon(
                      shouldDisplayCountDownWithTooltip(record.labelList, '项目总监')[1]
                    )[0]

                  }}:<span class="weight-num">{{
                      splitStringByColon(
                        shouldDisplayCountDownWithTooltip(record.labelList, '项目总监')[1]
                      )[1]
                    }}</span></div
                >

                <div
                  v-if="shouldDisplayCountDownWithTooltip(record.labelList, '项目经理')[0]"
                  :class="{
                                        'pm-score-no': hasHyphen(
                                            shouldDisplayCountDownWithTooltip(record.labelList, '项目经理')[1]
                                        ),
                                        'pm-score-yes': hasPlus(
                                            shouldDisplayCountDownWithTooltip(record.labelList, '项目经理')[1]
                                        )
                                    }"
                  @click="showScore(record.pmLabelList, '项目经理')"
                >{{
                    splitStringByColon(
                      shouldDisplayCountDownWithTooltip(record.labelList, '项目经理')[1]
                    )[0]

                  }}:<span class="weight-num">{{
                      splitStringByColon(
                        shouldDisplayCountDownWithTooltip(record.labelList, '项目经理')[1]
                      )[1]
                    }}</span></div
                >

                <div
                  v-if="shouldDisplayCountDownWithTooltip(record.labelList, '任务执行人')[0]"
                  :class="{
                                        'ower-score-no': hasHyphen(
                                            shouldDisplayCountDownWithTooltip(record.labelList, '任务执行人')[1]
                                        ),
                                        'ower-score-yes': hasPlus(
                                            shouldDisplayCountDownWithTooltip(record.labelList, '任务执行人')[1]
                                        )
                                    }"
                  @click="showScore(record.taskOwnerLabelList, '负责人')"
                >{{
                    splitStringByColon(
                      shouldDisplayCountDownWithTooltip(record.labelList, '任务执行人')[1]
                    )[0]

                  }}:<span class="weight-num">{{
                      splitStringByColon(
                        shouldDisplayCountDownWithTooltip(record.labelList, '任务执行人')[1]
                      )[1]
                    }}</span></div
                >
              </div>
            </template>
            <!-- 倒计时 -->
            <template v-if="column.dataIndex === 'taskStatus'">
              <div class="task-status-new" @click="getTaskStatus(record.actionTaskId, 1)">
                <div class="wqd-btn" v-if="text === '未启动'">未启动</div>
                <div class="jxz-btn" v-else-if="text === '进行中'">进行中</div>
                <div class="wc-btn" v-else-if="text === '完成'">完成</div>
                <div class="yq-btn" v-else-if="text === '延期'" color="#F5222D">延期</div>
                <div class="yqwc-btn" v-else-if="text === '延期完成'" color="#FAAD14">延期完成</div>
                <div class="spz-btn" v-else-if="text === '审批中'" color="#FAAD14">审批中</div>
                <div class="wqd-btn" v-else-if="text === '下线'" color="#FAAD14">下线</div>
                <div v-else>{{ text }}</div>
              </div>
            </template>
            <template v-if="column.dataIndex === 'ppmEnclosureInfoList'">
              <!--                                  预览/下载-->
              <div v-for="(item, index) in record.ppmEnclosureInfoList" :key="index">
                <a-dropdown>
                  <span
                    style="
                                            overflow: hidden;
                                            white-space: nowrap;
                                            text-overflow: ellipsis;
                                            display: block;
                                        "
                    :title="item.name"
                  >
                    {{ item.name }}
                  </span>
                  <template #overlay>
                    <a-menu>
                      <a-menu-item>
                        <a-button style="width: 100%" type="link" size="small" @click="handlerDownload(item)">下载</a-button>
                      </a-menu-item>
                    </a-menu>
                  </template>
                </a-dropdown>
              </div>
              <!--                                  预览/下载-->
            </template>
            <template v-if="column.dataIndex === 'operation'">
              <a-button size="small" v-if="!record.taskExamStatus" type="link" @click="handleActionStart(record)"> 开始 </a-button>
              <a-button
                size="small"
                v-else
                type="link"
                @click="actionBeforeOk(record)"
                :disabled="
                                    record.taskStatus === '审批中' ||
                                    record.taskStatus === '完成' ||
                                    record.taskStatus === '延期完成'
                                "
              >
                完成
              </a-button>
              <a-divider style="margin: 0; border-color: #3875ff" type="vertical" />
              <a-button
                size="small"
                type="link"
                @click="handlerEditAction(record)"
                :disabled="
                                    record.taskStatus === '审批中' ||
                                    record.taskStatus === '完成' ||
                                    record.taskStatus === '延期完成'
                                "
              >
                编辑
              </a-button>
              <a-divider style="margin: 0; border-color: #3875ff" type="vertical" />

              <a-dropdown>
                <a-button size="small" type="link"> 更多</a-button>
                <template #overlay>
                  <a-menu>
                    <a-menu-item>
                      <a-popconfirm
                        title="确定要删除吗？"
                        @confirm="handlerDeleteAction(record)"
                        :disabled="
                                                    record.taskStatus === '审批中' ||
                                                    record.taskStatus === '完成' ||
                                                    record.taskStatus === '延期完成'
                                                "
                      >
                        <a-button
                          size="small"
                          :disabled="
                                                        record.taskStatus === '审批中' ||
                                                        record.taskStatus === '完成' ||
                                                        record.taskStatus === '延期完成'
                                                    "
                          type="link"
                        >删除</a-button
                        >
                      </a-popconfirm>
                    </a-menu-item>
                    <a-menu-item>
                      <a-button
                        size="small"
                        :disabled="
                                                    record.taskStatus === '审批中' ||
                                                    record.taskStatus === '完成' ||
                                                    record.taskStatus === '延期完成'
                                                "
                        type="link"
                        @click="handlerUrge(record)"
                      >
                        催办
                      </a-button>
                    </a-menu-item>
                    <a-menu-item>
                      <a-button size="small" type="link" @click="warningAction(record)"> 预警 </a-button>
                    </a-menu-item>
                    <a-menu-item>
                      <a-button size="small" type="link" :disabled="record.disabledNoteBtn" @click="handlerShowActionNotes(record)"> 历史备注 </a-button>
                    </a-menu-item>
                  </a-menu>
                </template>
              </a-dropdown>
            </template>
          </template>
        </a-table>
        <a-modal
          :visible="actionState.addOrEditActionVisible"
          :title="actionState.title"
          destroyOnClose
          centered
          width="50%"
          :ok-button-props="{ loading: okLoading }"
          :body-style="{ maxHeight: '850px', overflow: 'auto' }"
          @cancel="actionStateCancel"
          @ok="handleSubmitAction"
          :maskClosable="false"
        >
          <a-form ref="actionFormRef" :model="actionState.actionList">
            <div v-for="(item, index) in actionState.actionList" :key="index" class="form-item">
              <div class="form-content-action">
                <a-row>
                  <a-col :span="12">
                    <a-form-item
                      label="工厂/项目名称"
                      :name="[index, 'projectName']"
                      :rules="[
                                                { required: true, message: '请选择工厂/项目名称!', trigger: 'blur' }
                                            ]"
                    >
                      <a-tree-select
                        v-model:value="actionState.actionList[index].projectName"
                        show-search
                        style="width: 100%"
                        placeholder="请选择"
                        allow-clear
                        :tree-data="actionState.treeData"
                        :fieldNames="{
                                                    children: 'children',
                                                    label: 'projectName',
                                                    value: 'projectId',
                                                    key: 'projectId'
                                                }"
                        @change="treeChange"
                        :max-tag-count="1"
                      />
                    </a-form-item>
                  </a-col>
                  <a-col :span="12">
                    <a-form-item label="行动项任务名称" :name="[index, 'actionTaskName']" :rules="{ required: true, message: '请输入行动项任务名称!' }">
                      <a-input placeholder="请输入行动项任务名称" v-model:value="actionState.actionList[index].actionTaskName" />
                    </a-form-item>
                  </a-col>
                </a-row>
                <a-row v-if="actionState.isproject">
                  <a-col :span="12">
                    <a-form-item label="项目阶段">
                      <a-select
                        allow-clear
                        placeholder="请选择项目阶段"
                        v-model:value="actionState.actionList[index].milepostId"
                        :field-names="{ label: 'milepostName', value: 'milepostId' }"
                        :filter-option="
                                                    (input, option) => {
                                                        return (
                                                            option.milepostName
                                                                .toLowerCase()
                                                                .indexOf(input.toLowerCase()) >= 0
                                                        )
                                                    }
                                                "
                        :options="actionState.milepostList"
                        showSearch
                        @change="actionMchange(index)"
                      />
                    </a-form-item>
                  </a-col>
                  <a-col :span="12">
                    <a-form-item label="任务名称">
                      <a-select
                        allow-clear
                        placeholder="请选择任务名称"
                        v-model:value="actionState.actionList[index].taskId"
                        :field-names="{ label: 'taskName', value: 'taskId' }"
                        :filter-option="
                                                    (input, option) => {
                                                        return (
                                                            option.taskName
                                                                .toLowerCase()
                                                                .indexOf(input.toLowerCase()) >= 0
                                                        )
                                                    }
                                                "
                        :options="actionState.taskList"
                        showSearch
                        @focus="getActionTask(actionState.actionList[index].milepostId)"
                      />
                    </a-form-item>
                  </a-col>
                </a-row>

                <a-row>
                  <a-col :span="12">
                    <a-form-item label="任务起止时间" :name="[index, 'allTime']" :rules="{ required: true, message: '请选择任务起止时间!' }">
                      <a-range-picker style="width: 100%" v-model:value="actionState.actionList[index].allTime" valueFormat="YYYY-MM-DD" />
                    </a-form-item>
                  </a-col>
                  <a-col :span="12">
                    <a-form-item label="任务负责人" :name="[index, 'taskOwner']" :rules="{ required: true, message: '请选择任务负责人!' }">
                      <a-select
                        placeholder="请选择任务负责人"
                        v-model:value="actionState.actionList[index].taskOwner"
                        showSearch
                        :options="peopleList"
                        :field-names="{ label: 'label', value: 'value' }"
                        :filter-option="
                                                    (input, option) => {
                                                        return (
                                                            option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                                        )
                                                    }
                                                "
                      />
                    </a-form-item>
                  </a-col>
                </a-row>
                <a-row>
                  <a-col :span="12">
                    <a-form-item label="审核员" :name="[index, 'assessorName']" :rules="{ required: true, message: '请选择审核员!' }">
                      <a-select
                        placeholder="请选择审核员"
                        v-model:value="actionState.actionList[index].assessorName"
                        showSearch
                        :options="peopleList"
                        :field-names="{ label: 'label', value: 'value' }"
                        :filter-option="
                                                    (input, option) => {
                                                        return (
                                                            option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                                        )
                                                    }
                                                "
                      />
                    </a-form-item>
                  </a-col>
                  <a-col :span="12">
                    <a-form-item label="PMO" :name="[index, 'projectManagementOffice']" :rules="{ required: true, message: '请选择PMO!' }">
                      <a-select
                        placeholder="请选择PMO"
                        v-model:value="actionState.actionList[index].projectManagementOffice"
                        showSearch
                        :options="peopleList"
                        :field-names="{ label: 'label', value: 'value' }"
                        :filter-option="
                                                    (input, option) => {
                                                        return (
                                                            option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                                        )
                                                    }
                                                "
                      />
                    </a-form-item>
                  </a-col>
                </a-row>
                <a-row class="one-line">
                  <a-col :span="24">
                    <a-form-item label="任务执行人" :name="[index, 'taskParticipantList']" :rules="{ required: true, message: '请选择任务执行人!' }">
                      <a-select
                        placeholder="请选择任务执行人"
                        v-model:value="actionState.actionList[index].taskParticipantList"
                        showSearch
                        mode="multiple"
                        :options="peopleList"
                        :field-names="{ label: 'label', value: 'value' }"
                        :filter-option="
                                                    (input, option) => {
                                                        return (
                                                            option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                                        )
                                                    }
                                                "
                      />
                    </a-form-item>
                  </a-col>
                  <a-col v-if="taskPeopleList && taskPeopleList.length > 0">
                    <div style="width: 700px; margin-left: 115px; margin-bottom: 28px">
                      <a href="javascript:;" v-for="(item, num) in taskPeopleList" @click="handlerAddActionPeople(item.value, index)"
                      ><span style="margin: 0 5px">{{ item.value }}</span></a
                      >
                    </div>
                  </a-col>
                </a-row>
                <a-row class="one-line">
                  <a-col :span="24">
                    <a-form-item :wrapper-col="{ span: 24 }" name="finishStandard" label="完成标准">
                      <a-textarea :maxlength="1000" :rows="3" v-model:value="actionState.actionList[index].finishStandard" placeholder="请输入" />
                    </a-form-item>
                    <div class="tips" style="margin-top: -4px">
                      请用”；“号区分不同细项的内容，格式参考：<br />
                      1）设计反讲机制及频率、并执行；<br />
                      2）通过反讲，确认研发、产品、测试和现场项目人员等各角色均已对产品设计形成统一认知；
                    </div>
                  </a-col>
                </a-row>
                <a-row class="one-line">
                  <a-col :span="24">
                    <a-form-item label="备注">
                      <a-textarea placeholder="请输入备注" v-model:value="actionState.actionList[index].description" />
                    </a-form-item>
                  </a-col>
                </a-row>
                <a-row class="one-line" v-if="actionState.title === '编辑行动项任务'">
                  <a-col :span="24">
                    <a-form-item label="变更原因" :rules="{ required: true, message: '请输入变更原因!', trigger: 'blur' }" :name="[index, 'reasonsChange']">
                      <a-textarea placeholder="请输入变更原因" v-model:value="actionState.actionList[index].reasonsChange" />
                    </a-form-item>
                  </a-col>
                </a-row>
              </div>
              <!--                            <a-->
              <!--                                v-if="!actionState.current.actionTaskId && actionState.isTaskAdd === false"-->
              <!--                                class="del"-->
              <!--                                @click="handlerDeleteActionItem(index)"-->
              <!--                                >删除</a-->
              <!--                            >-->
            </div>
          </a-form>
          <!--                    <a-button-->
          <!--                        v-if="!actionState.current.actionTaskId && actionState.isTaskAdd === false"-->
          <!--                        type="primary"-->
          <!--                        ghost-->
          <!--                        class="add-btn"-->
          <!--                        @click="handlerAddActionItem"-->
          <!--                    >-->
          <!--                        <plus-outlined />-->
          <!--                        添加-->
          <!--                    </a-button>-->
        </a-modal>

        <!-- 行动项完成 -->
        <a-modal
          :visible="actionState.actionOkVisible"
          title="完成行动项任务"
          destroyOnClose
          centered
          width="40%"
          @cancel="actionState.actionOkVisible = false"
          @ok="handlerSubAction"
          :ok-button-props="{ loading: confirmLoading }"
        >
          <div style="margin-bottom: 10px; font-size: 16px; font-weight: 600"> 完成附件证明</div>
          <a-upload :file-list="actionState.fileList" :multiple="true" :before-upload="handlerActionUpload" @remove="handleActionRemove" accept=".xlsx,.ppt,.pdf,.PDF, image/*, .docx, .rp, .xls">
            <a-button type="primary">
              <upload-outlined />
              上传
            </a-button>
          </a-upload>
          <span>支持格式：image/*,.xlsx,.xls,.docx,.rp,.ppt,.pptx,.pdf</span>
        </a-modal>
        <!-- 行动项完成 -->
        <!--                      行动项历史备注-->
        <a-modal :visible="actionState.visibleNotes" title="历史备注" width="40vw" centered destroyOnClose :footer="null" @cancel="actionState.visibleNotes = false">
          <a-table
            bordered
            class="note-table"
            rowKey="taskId"
            :customRow="customRow"
            :columns="actionState.notesColumns"
            :data-source="actionState.noteData"
            :pagination="false"
            :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)"
          />
        </a-modal>
        <!--                      行动项历史备注-->
        <!--                      行动项-风险预警-->
        <a-modal v-model:visible="actionRisk.warrVisible" title="新增任务风险" @ok="actionRiskOk">
          <a-form :model="actionRisk" ref="actionRiskRef">
            <a-row>
              <a-col :span="24">
                <a-form-item label="任务名称" name="taskName" :rules="[{ required: true, message: '请输入任务名称', trigger: 'blur' }]">
                  <a-input v-model:value="actionRisk.taskName" disabled />
                </a-form-item>
              </a-col>
              <a-col :span="24">
                <a-form-item label="风险描述" name="riskDescription" :rules="[{ required: true, message: '请输入风险描述', trigger: 'blur' }]">
                  <a-input v-model:value="actionRisk.riskDescription" />
                </a-form-item>
              </a-col>
              <a-col :span="24">
                <a-form-item label="解决方案" name="solution" :rules="[{ required: true, message: '请输入解决方案', trigger: 'blur' }]">
                  <a-input v-model:value="actionRisk.solution" />
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
        </a-modal>
        <a-modal :visible="actionState.visibleRisk" title="风险" width="80vw" centered destroyOnClose :footer="null" :getContainer="getModalContainer" @cancel="actionState.visibleRisk = false">
          <a-table
            class="risk-table"
            bordered
            rowKey="taskId"
            :customRow="customRow"
            :columns="actionState.riskColumns"
            :data-source="actionState.riskList"
            :pagination="false"
            :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)"
          >
            <template #bodyCell="{ column, record }">
              <template v-if="column.dataIndex === 'operation'">
                <a-button type="link" :disabled="record.riskState === '关闭'" @click="handlerBeforeClose(record)">关闭</a-button>
              </template>
            </template>
          </a-table>
        </a-modal>
        <a-modal v-model:visible="stateF.previewVisible" @cancel="handleCancel" width="1000px" title="图片预览" :footer="null">
          <div v-if="stateF.isImagePreview">
            <img :src="stateF.previewImage" alt="附件" style="width: 100%" />
          </div>
          <div v-else>
            <iframe :src="stateF.previewFileUrl" style="width: 100%; height: 500px"></iframe>
          </div>
        </a-modal>
        <a-modal
          :visible="actionState.closeVisible"
          title="关闭风险"
          destroyOnClose
          centered
          width="40%"
          :ok-button-props="{ disabled: btnLoading }"
          @cancel="actionState.closeVisible = false"
          @ok="handlerClose"
        >
          <a-form ref="closeFormRef" :model="closeCurrent">
            <div class="form-content">
              <a-row>
                <a-col :span="24">
                  <a-form-item label="风险关闭备注" name="riskRemarks" :rules="{ required: true, message: '请输入风险关闭备注!' }">
                    <a-textarea v-model:value="closeCurrent.riskRemarks" :rows="5" />
                  </a-form-item>
                </a-col>
              </a-row>
            </div>
          </a-form>
        </a-modal>
      </div>
      <!-- end vid_wpvhspioao 自定义模板_dpi21hcb5d -->
    </a-spin>
  </div>
</template>
<script setup lang="tsx">
import {
  h, ref, reactive, toRaw, markRaw, watch, computed,
  onBeforeMount, onMounted, onBeforeUnmount, onUnmounted, onActivated, onDeactivated
} from "vue";
import { useRoute, useRouter } from 'vue-router';
const router = useRouter();
const route = useRoute();
import { get, post, put, del, request, requestWithHeaders } from '@/utils/http/Axios';
import { cloneDeep, localGet, merge, getDifferenceArray, traversalTreeStructure, checkCaseCondition, renderStringInTemplate, handleBreadcrumbJump, throttle, permission, getComponentParamsValue } from '@/utils/index';
import { isNullOrEmpty, isEmptyArr, isNullOrUnDef, isContained, isArray, isEmpty, isObject } from '@/utils/is';
import dayjs from 'dayjs';
import { getPagePcChartsDataSourceConvert } from '@/utils/chart';
import { message, notification, Modal } from 'ant-design-vue'
import { propertyFormatByNumber, propertyFormatByPercentage, propertyFormatByDate, parseSubFromDataList } from '@/utils/format';
import colorTheme from '@/design/custom-theme.json';
/*** PUBLISH_EXEGESIS ***
 import UserTableRecords from '@/model/UserTableRecords';
 import { getAppBaseUrl } from '@/utils/index';
 import { sendToken } from "@/hooks/useIframeToken";
 import { useSystemStore } from "@/store/modules/system";
 const systemStore = useSystemStore();
 *** PUBLISH_EXEGESIS ***/



  // 获取传入的流程ID和组件参数
const props = defineProps({
    'processInstanceId': {
      type: [String,Number,Boolean],
      default: undefined,
    },
  })
const immediateWatch = (source, callback) => {
  watch(source, callback, {deep: true,immediate: true })
}



/* -------------------------- 属性定义 -------------------------- */

const setTimeOutList = [];
const pageLoading = reactive({
  loading: false,
  tip: undefined
});
const authInfo = localGet('app-user-store');




// 处理校验
const setSubFormName =(parentInfo, name)=>{
  return [parentInfo.parents, parentInfo.cycleIndex, name];
}


/* ========================== 属性定义 ========================== */


/* -------------------------- 元素数据引用 -------------------------- */


/* ========================== 元素数据引用 ========================== */


/* -------------------------- 页面数据 -------------------------- */


/* ========================== 页面数据 ========================== */



/* -------------------------- 响应 -------------------------- */

/* ========================== 响应 ========================== */


/* -------------------------- 函数 -------------------------- */

/* ========================== 函数 ========================== */


/* -------------------------- 页面参数 -------------------------- */

const pageParameter_state = reactive({
  'processInstanceId': props.processInstanceId ?? route.query.processInstanceId,
})

/* ========================== 页面参数 ========================== */


/* -------------------------- 组件事件处理方法 -------------------------- */

// ---------------------------- 组件数据同步 ----------------------------

// ============================ 组件数据同步 ============================


/* ========================== 组件事件处理方法 ========================== */


/* -------------------------- 生命周期 -------------------------- */
// 用于参数变更后重新执行自定义指令
const queryUpdateFlag = ref(0);
onMounted(() => { ;

});

onUnmounted(() => {
  // 销毁定时器
  setTimeOutList.forEach(({ repeat, timer }) => {
    repeat ?  clearInterval(timer): clearTimeout(timer);
  });
});

/* ========================== 生命周期 ========================== */


/* -------------------------- 数据关联处理 -------------------------- */





/* -------------------------- 表单数据同步 -------------------------- */
/* ========================== 表单数据同步 ========================== */

/* ========================== 数据关联处理 ========================== */


/* -------------------------- 不同组件自定义的处理逻辑 -------------------------- */

/* ========================== 不同组件自定义的处理逻辑 ========================== */


// ================================定制化逻辑========================================
const userInfoStorage = localStorage.getItem('al__USER_INFO')
if (userInfoStorage) {
  try {
    const userInfo = JSON.parse(userInfoStorage)
  } catch (error) {
    console.log(error)
  }
}
onMounted(() => {
  get(`/solution-ppm/api/v2/built-in-system-ppm/action_task/permission`).then(data => {
    if (data.code === 200) {
      actionState.permission = true
    } else {
      actionState.permission = false
    }
  })
  getAction()
})
const taskLeader = JSON.parse(userInfoStorage)
const labelToolStyle = {
  maxWidth: '1000px'
}
// 分页方法
const pageSizeChange = (current, size) => {
  pagination.value.current = current
  pagination.value.pageSize = size
  // getAction()
}
const pageChange = (page, pageSize) => {
  pagination.value.current = page
  pagination.value.pageSize = pageSize
  getAction()
}
const actionState = reactive({
  filter: {
    endTime: '',
    taskOwner: '',
    taskStatusList: [],
    projectTreeFormList: []
  },
  treeData: [],
  riskList: [],
  visibleRisk: false,
  labelCoulmn: [
    {
      title: '加减分类型',
      width: 120,
      dataIndex: 'pointTypeName'
    },
    {
      title: '加减分数',
      width: 100,
      dataIndex: 'taskPoints'
    },
    {
      title: '加减分触发日期',
      width: 200,
      dataIndex: 'updateTime'
    },
    {
      title: '是否扣分',
      width: 120,
      dataIndex: 'deductStatus'
    },
    {
      title: '审批日期',
      width: 200,
      dataIndex: 'taskRectificationPointsTime'
    },
    {
      title: '是否绩效结算',
      width: 200,
      dataIndex: 'settlementView'
    }
  ],
  permission: true,
  actionOkVisible: false,
  sopList: [],
  CompletionCheckListCheckList: [],
  ppmTemplateCheckList: [],
  fileList: [],
  addOrEditActionVisible: false,
  columns: [
    {
      title: '工厂/项目名称',
      dataIndex: 'projectNames',
      resizable: true,
      ellipsis: true,
      width: '140px',
      align: 'left'
      // fixed: 'left',
    },
    {
      title: '项目阶段',
      dataIndex: 'milepostName',
      resizable: true,
      ellipsis: true,
      width: '140px',
      // fixed: 'left',
      align: 'left'
    },

    {
      title: '任务名称',
      dataIndex: 'taskName',
      ellipsis: true,
      resizable: true,
      width: '220px',
      // fixed: 'left',
      align: 'left'
    },
    {
      title: '行动项任务名称',
      dataIndex: 'actionTaskName',
      ellipsis: true,
      resizable: true,
      width: '220px',
      align: 'left'
    },
    {
      title: '任务状态',
      dataIndex: 'taskStatus',
      resizable: true,
      ellipsis: false,
      width: '140px',
      align: 'center'
    },
    {
      title: '任务进度',
      dataIndex: 'taskSchedule',
      resizable: true,
      ellipsis: false,
      width: '140px',
      align: 'center'
    },
    {
      title: '倒计时及加减分',
      dataIndex: 'countDown',
      resizable: true,
      ellipsis: false,
      width: '250px',
      align: 'center',
      customCell: ({ rowSpan, rowIndex, aa }) => {
        return {
          style: {
            padding: 0
          }
        }
      }
    },
    {
      title: '完成标准',
      dataIndex: 'finishStandard',
      resizable: true,
      ellipsis: false,
      width: '150px',
      align: 'center'
    },
    {
      title: '未关闭风险数量',
      dataIndex: 'unclosedRiskNumber',
      resizable: true,
      ellipsis: false,
      width: '150px',
      align: 'center'
    },
    {
      title: '附件',
      dataIndex: 'ppmEnclosureInfoList',
      resizable: true,
      ellipsis: true,
      width: '200px',
      align: 'center'
    },
    {
      title: '任务负责人',
      dataIndex: 'taskOwner',
      resizable: true,
      ellipsis: true,
      width: '140px',
      align: 'center'
    },
    {
      title: '审核员',
      dataIndex: 'assessorName',
      resizable: true,
      ellipsis: true,
      width: '140px',
      align: 'center'
    },
    {
      title: 'PMO',
      dataIndex: 'projectManagementOffice',
      resizable: true,
      ellipsis: true,
      width: '140px',
      align: 'center'
    },
    {
      title: '任务执行人',
      resizable: true,
      dataIndex: 'taskParticipantStr',
      ellipsis: true,
      width: '140px',
      align: 'center'
    },
    {
      title: '计划开始',
      dataIndex: 'startTime',
      resizable: true,
      ellipsis: true,
      width: '140px',
      align: 'center'
    },
    {
      title: '实际开始',
      dataIndex: 'examPassTime',
      resizable: true,
      ellipsis: true,
      width: '140px',
      align: 'center'
    },
    {
      title: '计划完成',
      dataIndex: 'endTime',
      ellipsis: true,
      width: '120px',
      resizable: true,
      align: 'center'
    },
    {
      title: '	实际完成',
      dataIndex: 'taskFinishTime',
      ellipsis: true,
      resizable: true,
      width: '120px',
      align: 'center'
    },
    {
      title: '计划工时(小时)',
      dataIndex: 'workingHours',
      resizable: true,
      ellipsis: true,
      width: '130px',
      align: 'center'
    },
    {
      title: '实际工时(小时)',
      dataIndex: 'actualWorkHours',
      resizable: true,
      ellipsis: true,
      width: '130px',
      align: 'center'
    },
    {
      title: '工时投入状态',
      dataIndex: 'stateInput',
      resizable: true,
      ellipsis: true,
      width: '120px',
      align: 'center'
    },
    {
      title: '操作',
      dataIndex: 'operation',
      width: '180px',
      align: 'center',
      fixed: 'right'
    }
  ],
  tableLoading: false,
  spinning: false,
  actionList: [],
  actionListItem: {
    taskName: undefined,
    milepostId: undefined,
    taskId: undefined,
    actionTaskName: undefined,
    taskOwner: undefined,
    assessorName: undefined,
    projectManagementOffice: taskLeader.value.name,
    startTime: undefined,
    endTime: undefined,
    allTime: [],
    taskParticipantList: [],
    description: undefined,
    workingHours: undefined,
    parentId: undefined,
    reasonsChange: undefined,
    projectName: undefined,
    finishStandard: ''
  },
  isTaskAdd: false,
  current: {},
  // 项目阶段
  milepostList: [],
  taskList: [],
  notesColumns: [
    { title: '备注内容', dataIndex: 'content', align: 'center' },
    { title: '提交人', dataIndex: 'createdBy', align: 'center' },
    { title: '提交时间', dataIndex: 'createdTime', align: 'center' }
  ],
  noteData: [],
  visibleNotes: false,
  isproject: false,
  riskColumns: [
    { title: '风险描述', dataIndex: 'riskDescription', width: '300px', align: 'center' },
    { title: '解决方案', dataIndex: 'solution', align: 'center' },
    { title: '风险状态', dataIndex: 'riskState', align: 'center' },
    { title: '提交人', dataIndex: 'createdBy', align: 'center' },
    { title: '提交时间', dataIndex: 'createdTime', align: 'center' },
    { title: '解决人', dataIndex: 'solver', align: 'center' },
    { title: '风险关闭备注', dataIndex: 'riskRemarks', align: 'center' },
    { title: '操作', dataIndex: 'operation', align: 'center' }
  ],

  closeVisible: false,
  searchList: []
})
const pagination = ref({
  current: 1,
  pageSize: 20,
  showSizeChanger: true,
  showQuickJumper:true,
  total: '0',
  pageSizeOptions: ['5', '10', '20', '30', '40', '100'],
  showTotal: total => `共 ${total} 个项目 第${pagination.value.current}/${Math.ceil(pagination.value.total/pagination.value.pageSize)}页`,
  onShowSizeChange: pageSizeChange,
  onChange: pageChange,
})
function getSearchList() {
  get('/solution-ppm/api/v2/built-in-system-ppm/action_task/parent_project_list').then(data => {
    actionState.searchList = data.data
  })
}

// 获取树
function getTree() {
  get('/solution-ppm/api/v2/built-in-system-ppm/action_task/project_tree').then(data => {
    actionState.treeData = data.data
  })
}

getTree()

// 获取项目阶段
function getActionMilepostList(id) {
  get(`/solution-ppm/api/v2/built-in-system-ppm/delivery_milepost/${id}/milepost_name/list`).then(data => {
    actionState.milepostList = data.data.dataList
  })
}

// 根据项目阶段查任务
function getActionTask(id) {
  post('/solution-ppm/api/v2/built-in-system-ppm/action_task/task_list', {
    milepostId: id
  }).then(data => {
    actionState.taskList = data.data
  })
}

function actionMchange(index) {
  actionState.actionList[index].taskId = undefined
}

const searchTree = computed(() => {
  const findNode = (nodes, value) => {
    for (let node of nodes) {
      if (node.projectId === value) {
        return { projectName: node.projectName, projectId: node.projectId, nodeType: node.nodeType }
      }
      if (node.children && node.children.length > 0) {
        const result = findNode(node.children, value)
        if (result) {
          return result
        }
      }
    }
    return null
  }

  // 检查 projectTreeFormList 是否存在并且是数组
  if (Array.isArray(actionState.filter.projectTreeFormList)) {
    return actionState.filter.projectTreeFormList
      .map(value => findNode(actionState.treeData, value))
      .filter(item => item !== null)
  } else {
    return [] // 如果 projectTreeFormList 不存在或不是数组，返回空数组
  }
})

//     获取行动项
function getAction() {
  actionState.tableLoading = true
  post(`/solution-ppm/api/v2/built-in-system-ppm/action_task/list/0`, {
    endTime: actionState.filter.endTime,
    taskOwner: actionState.filter.taskOwner,
    taskStatusList: actionState.filter.taskStatusList,
    projectTreeFormList: searchTree.value,
    pageNo: pagination.value.current,
    pageSize: pagination.value.pageSize
  })
    .then(data => {
      if (data.code === 200) {
        actionState.dataList = data.data.dataList
        actionState.current = {}
        pagination.value.total = data.data.totalElements
      } else {
        message.error(data.message)
        actionState.dataList = []
      }
    })
    .finally(() => {
      actionState.tableLoading = false
    })
}

function reset() {
  actionState.filter = {
    endTime: '',
    taskOwner: '',
    taskStatusList: [],
    projectName: []
  }
  pagination.value.current = 1
  getAction()
}

function groupActionData(data) {
  let currentMilepostName = ''
  let currentTaskName = ''

  return data.map((item, index) => {
    if (currentMilepostName !== item.milepostName) {
      currentMilepostName = item.milepostName
      item.milepostNameSpan = calculateSpan(data, index, 'milepostName', currentMilepostName)
    } else {
      item.milepostNameSpan = 0
    }

    if (currentTaskName !== item.taskName) {
      currentTaskName = item.taskName
      item.taskNameSpan = calculateSpan(data, index, 'taskName', currentTaskName)
    } else {
      item.taskNameSpan = 0
    }

    return item
  })
}

function calculateSpan(data, index, property, value) {
  let span = 0
  for (let i = index; i < data.length; i++) {
    if (data[i][property] === value) {
      span += 1
    } else {
      break
    }
  }
  return span
}

const peopleList = ref([])

// 交付参与人s所有人
function getAllJfPeople() {
  get('/solution-ppm/api/v2/built-in-system-ppm/pmgf/get/allUser').then(({ data }) => {
    peopleList.value = data.userDtoList.map(item => {
      return {
        label: item.name,
        value: item.name
      }
    })
  })
}

getAllJfPeople()
const actionFormRef = ref(null)

function handlerAddAction() {
  if (actionState.permission === false) {
    message.error('暂无权限进行此操作')
  } else {
    actionState.actionList = []
    actionState.actionList.push({ ...actionState.actionListItem })

    actionState.title = '新建行动项任务'
    actionState.addOrEditActionVisible = true
  }
}

const taskPeopleList = ref([])

function getPopleList() {
  post(`/solution-ppm/api/v2/built-in-system-ppm/task/getTopUser/${projectId.value}`).then(data => {
    taskPeopleList.value = data.data.map(item => {
      return {
        label: item,
        value: item
      }
    })
  })
}

// function handlerDeleteActionItem(index) {
//     actionState.actionList.splice(index, 1)
// }
//
// function handlerAddActionItem(index) {
//     actionState.actionList.push({ ...actionState.actionListItem })
// }
const okLoading = ref(false)

// 行动项保存
function handleSubmitAction() {
  if (actionState.actionList.length < 1) {
    message.info('至少添加一条')
  } else {
    actionFormRef.value.validate().then(() => {
      okLoading.value = true
      let params = Object.values(actionState.actionList).map(item => ({
        ...item,
        startTime: item.allTime[0],
        endTime: item.allTime[1],
        projectTreeFormList: selectedObjects.value
      }))
      if (actionState.title === '新建行动项任务') {
        //   新建
        post(`/solution-ppm/api/v2/built-in-system-ppm/action_task/create`, params[0])
          .then(data => {
            if (data.code === 200) {
              message.success('新建成功')
              actionState.addOrEditActionVisible = false
              getAction()
              actionState.isproject = false
            } else {
              message.error(data.message)
            }
          })
          .finally(() => {
            okLoading.value = false
          })
      } else {
        //   编辑
        put(
          `/solution-ppm/api/v2/built-in-system-ppm/action_task/${actionState.current.actionTaskId}/update`,
          params[0]
        )
          .then(data => {
            if (data.code === 200) {
              message.success('编辑成功')
              actionState.addOrEditActionVisible = false
              getAction()
              actionState.isproject = false
            } else {
              message.error(data.message)
            }
          })
          .finally(() => {
            okLoading.value = false
          })
      }
    })
  }
}

const actionOkDisabled = ref(false)

function actionBeforeOk(record) {
  get(`/solution-ppm/api/v2/built-in-system-ppm/action_task/${record.actionTaskId}/start_permission`).then(
    data => {
      if (data.code !== 200) {
        message.error('暂无权限进行此操作')
      } else {
        if (record.unclosedRiskNumber > 0) {
          message.info('该任务包含风险，请关闭风险后重试')
        } else {
          actionState.current = record
          actionState.actionOkVisible = true
        }
      }
    }
  )
}

function handleActionStart(record) {
  get(`/solution-ppm/api/v2/built-in-system-ppm/action_task/${record.actionTaskId}/start_permission`).then(
    data => {
      if (data.code !== 200) {
        message.error('暂无权限进行此操作')
      } else {
        actionState.current = record
        put(
          `/solution-ppm/api/v2/built-in-system-ppm/action_task/${actionState.current.actionTaskId}/start`
        ).then(data => {
          if (data.code === 200) {
            message.success('已开始该任务，请及时完成任务')
            getAction()
          } else {
            message.error(data.message)
          }
        })
      }
    }
  )
}

const confirmLoading = ref(false)

// 完成行动项
function handlerSubAction() {
  if (actionState.fileList.length < 1) {
    message.error('请上传附件')
  } else {
    confirmLoading.value = true
    put(`/solution-ppm/api/v2//built-in-system-ppm/action_task/${actionState.current.actionTaskId}/complete`, {
      ppmEnclosureInfoList: actionState.fileList
    })
      .then(data => {
        if (data.code === 200) {
          message.success('操作成功')
          actionState.actionOkVisible = false
          actionState.fileList = []
        } else {
          message.error(data.message)
        }
      })
      .finally(() => {
        confirmLoading.value = false
      })
  }
}

function handlerDeleteAction(record) {
  if (actionState.permission === false) {
    message.error('暂无权限进行此操作')
  } else {
    actionState.current = record
    actionState.taskId = record.taskId
    del(`/solution-ppm/api/v2/built-in-system-ppm/action_task/${actionState.current.actionTaskId}`).then(
      data => {
        if (data.code === 200) {
          message.success('删除成功')
          getAction()
        } else {
          message.error(data.message)
        }
      }
    )
  }
}

function handlerShowActionNotes(record) {
  actionState.current = record
  get(`/solution-ppm/api/v2/built-in-system-ppm/action_task/${actionState.current.actionTaskId}/history`).then(
    data => {
      if (data.code === 200) {
        actionState.visibleNotes = true
        actionState.noteData = data.data.dataList
      } else {
        message.error(data.message)
      }
    }
  )
}

function handlerEditAction(record) {
  if (actionState.permission === false) {
    message.error('暂无权限进行此操作')
  } else {
    const cleepData = cloneDeep(record)
    console.log(cleepData)
    getTree()
    actionState.actionList = []
    actionState.title = '编辑行动项任务'
    cleepData.projectName = cleepData.projectTreeFormList
    if (cleepData.milepostId) {
      actionState.isproject = true
      getActionMilepostList(cleepData.projectTreeFormList[0])
      getActionTask(cleepData.milepostId)
    }
    actionState.current = cleepData
    cleepData.allTime = [cleepData.startTime, cleepData.endTime]
    actionState.actionList.push(cleepData)

    actionState.addOrEditActionVisible = true
  }
}

function handlerActionUpload(file) {
  const data = new FormData()
  data.append('file', file)
  post('/file-storage/api/v1/file/upload', data).then(({ data: { fullUrl } }) => {
    if (data) {
      actionState.fileList = [
        ...actionState.fileList,
        {
          uid: file.uid,
          lastModified: file.lastModified,
          name: file.name,
          size: file.size,
          type: file.type,
          status: 'done',
          url: fullUrl
        }
      ]
    }
  })
  return false
}

// tooltip样式
const standardStyle = {
  maxWidth: 'unset'
}

function handleActionRemove(file) {
  actionState.fileList = actionState.fileList.filter(item => item.uid !== file.uid)
}

function handlerAddActionPeople(name, index) {
  if (actionState.actionList[index].taskParticipantList.indexOf(name) !== -1) {
    actionState.actionList[index].taskParticipantList = actionState.actionList[
      index
      ].taskParticipantList.filter(item => item !== name)
  } else {
    actionState.actionList[index].taskParticipantList.push(name)
  }
}

function actionStateCancel() {
  console.log('关闭')
  actionState.addOrEditActionVisible = false
  actionState.actionListItem.taskParticipantList = []
}

// 新行动项预警
const actionRisk = reactive({
  warrVisible: false,
  taskName: undefined,
  solution: undefined,
  actionTaskId: undefined,
  projectId: undefined,
  milepostId: undefined
})

// 模板项目-风险预警
function warningAction(record) {
  get(`/solution-ppm/api/v2/built-in-system-ppm/action_task/${record.actionTaskId}/start_permission`).then(
    data => {
      if (data.code === 200) {
        console.log(record, 'record')
        actionRisk.warrVisible = true
        actionRisk.taskName = record.actionTaskName
        actionRisk.riskDescription = record.riskDescription
        actionRisk.solution = record.solution
        actionRisk.actionTaskId = record.actionTaskId
        actionRisk.projectId = record.projectId
        actionRisk.milepostId = record.milepostId
      } else {
        message.error('暂无权限进行此操作')
      }
    }
  )
}

const actionRiskRef = ref(null)

function actionRiskOk() {
  actionRiskRef.value.validate().then(() => {
    const params = {
      actionTaskId: actionRisk.actionTaskId,
      projectId: actionRisk.projectId,
      milepostId: actionRisk.milepostId,
      riskDescription: actionRisk.riskDescription,
      solution: actionRisk.solution
    }
    console.log(params, 'params')
    post('/solution-ppm/api/v2/built-in-system-ppm/action_task/warn', params).then(data => {
      if (data.code === 200) {
        message.success('操作成功')
        actionRisk.warrVisible = false
        getAction()
      } else {
        message.error(data.message)
      }
    })
  })
}

const calculateTimeDifference = targetDate => {
  const targetDateTime = new Date(targetDate)
  const currentDateTime = new Date()
  const timeDifference = targetDateTime - currentDateTime
  const days = Math.floor(timeDifference / (1000 * 60 * 60 * 24))

  return {
    days: days,
    result: `${days}天${Math.floor((timeDifference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))}小时`
  }
}

function shouldDisplayCountDownWithTooltip(labelList, text) {
  const result = labelList?.filter(label => label.includes(text))
  if (result && result.length > 0) {
    return [true, result[0]]
  } else {
    return false
  }
}

function hasHyphen(str) {
  return str.includes('-')
}

function hasPlus(str) {
  return str.includes('+')
}

function splitStringByColon(inputString) {
  return inputString.split(':')
}

const shouldDisplayCountDown = targetDate => {
  const { days } = calculateTimeDifference(targetDate)
  return days >= 0 && days <= 7
}

function handleTaskResizeColumn(w, col) {
  col.width = w
}

// const treeChange = () => {
//     if (actionState.actionList[0].projectName.length == 1) {
//         // 判断是否是项目
//         post(
//             `/solution-ppm/api/v2/built-in-system-ppm/action_task/check`,
//             actionState.actionList[0].projectName
//         ).then(data => {
//             actionState.isproject = data.data
//             if (actionState.isproject) {
//                 getActionMilepostList(actionState.actionList[0].projectName[0])
//             }
//         })
//     } else {
//         actionState.isproject = false
//     }
// }
const treeChange = () => {
  actionState.actionList[0].milepostId = undefined
  actionState.actionList[0].taskId = undefined
  post(`/solution-ppm/api/v2/built-in-system-ppm/action_task/check`, [
    actionState.actionList[0].projectName
  ]).then(data => {
    actionState.isproject = data.data
    if (actionState.isproject) {
      getActionMilepostList(actionState.actionList[0].projectName)
    }
  })
}
// 计算属性，用于找到选中的节点并组成对象数组
// const selectedObjects = computed(() => {
//     const findNode = (nodes, value) => {
//         for (let node of nodes) {
//             if (node.projectId === value) {
//                 return { projectName: node.projectName, projectId: node.projectId, nodeType: node.nodeType }
//             }
//             if (node.children) {
//                 const result = findNode(node.children, value)
//                 if (result) {
//                     return result
//                 }
//             }
//         }
//         return null
//     }
//
//     return actionState.actionList[0].projectName
//         .map(value => findNode(actionState.treeData, value))
//         .filter(item => item !== null)
// })
const selectedObjects = computed(() => {
  const findNode = (nodes, value) => {
    for (let node of nodes) {
      if (node.projectId === value) {
        return { projectName: node.projectName, projectId: node.projectId, nodeType: node.nodeType }
      }
      if (node.children) {
        const result = findNode(node.children, value)
        if (result) {
          return result
        }
      }
    }
    return null
  }

  if (!actionState.actionList || !actionState.actionList[0] || !actionState.treeData) {
    return []
  }

  const projectNameValue = actionState.actionList[0].projectName

  if (!projectNameValue) {
    return []
  }

  // 将单一值转换为数组来处理
  const projectNameArray = Array.isArray(projectNameValue) ? projectNameValue : [projectNameValue]

  return projectNameArray.map(value => findNode(actionState.treeData, value)).filter(item => item !== null)
})

function getScore(arr) {
  let sum = 0
  if (arr) {
    arr.forEach(item => {
      if (item.deductStatus === '是') {
        sum += item.taskPoints || 0 // 如果 taskPoints 为 null 或者 undefined，将其视为 0
      }
    })
  }
  return sum.toFixed(2)
}

function handlerShowRisks(id) {
  post(`/solution-ppm/api/v2/built-in-system-ppm/action_task/warn_list/${id}`).then(data => {
    actionState.riskList = data.data
    actionState.current.actionTaskId = id
    actionState.visibleRisk = true
  })
}

const stateF = reactive({
  previewVisible: false,
  previewImage: '',
  previewFileUrl: '',
  isImagePreview: false
})

function previewAttachment(item) {
  // 检查附件类型
  if (item.type.startsWith('image')) {
    stateF.isImagePreview = true
    stateF.previewImage = item.url // 设置预览图片的URL
    stateF.previewVisible = true // 显示模态框
  } else {
    // stateF.isImagePreview = false;
    // // 如果是其他类型的文件，直接在模态框中显示
    // stateF.previewFileUrl = item.url; // 设置预览文件的URL
    message.info('目前仅支持图片预览')
  }
}

function handlerDownload({ url, name }) {
  function downBlob(blob) {
    const downloadElement = document.createElement('a')
    const href = window.URL.createObjectURL(blob) // 创建下载的链接
    downloadElement.href = href
    downloadElement.download = name // 下载后文件名
    document.body.appendChild(downloadElement)
    downloadElement.click() // 点击下载
    document.body.removeChild(downloadElement) // 下载完成移除元素
    window.URL.revokeObjectURL(href)
  }

  const data = new FormData()
  data.append('path', url)
  post('/solution-ppm/api/v2/built-in-system-ppm/delivery_task/downloadFile', data, {
    responseType: 'blob',
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
    }
  })
    .then(blob => {
      downBlob(blob)
    })
    .finally(() => {})
}

const closeCurrent = ref({
  dailyItemId: undefined,
  riskRemarks: ''
})

function handlerGetSpace(data) {
  return data?.split(/[,;；]/)
}

function handlerBeforeClose(record) {
  if (!record.pmoFlag) {
    message.info('暂无权限')
  } else {
    closeCurrent.value = {
      id: record.id,
      riskRemarks: '',
      type: record.type
    }
    actionState.closeVisible = true
  }
}

const closeFormRef = ref(null)

function handlerClose() {
  closeFormRef.value.validate().then(() => {
    post('/solution-ppm/api/v2/built-in-system-ppm/action_task/close_warn', closeCurrent.value)
      .then(({ code, message: errMsg }) => {
        if (code === 200) {
          actionState.closeVisible = false
          handlerShowRisks(actionState.current.actionTaskId)
          message.success('操作成功')
          getAction()
        } else {
          message.warning(errMsg || '操作失败')
        }
      })
      .finally(() => {})
  })
}

// 加减分详情弹窗
const scoreState = reactive({
  visible: false,
  scoreData: [],
  type: ''
})

function showScore(data, type) {
  console.log(data, type)
  scoreState.visible = true
  scoreState.scoreData = groupByBusinessDate(data)
  console.log(scoreState.scoreData, '格式化的分数')
  scoreState.type = type
}

function groupByBusinessDate(list, key = 'businessDate') {
  const grouped = list.reduce((acc, item) => {
    const groupKey = item[key]
    if (!acc[groupKey]) {
      acc[groupKey] = {
        month: groupKey,
        data: []
      }
    }
    acc[groupKey].data.push(item)
    return acc
  }, {})

  return Object.values(grouped)
}

function calculateTotalTaskPoints(data) {
  let totalTaskPoints = 0

  data.forEach(monthData => {
    monthData.data.forEach(record => {
      if (record.deductStatus === '是') {
        // 确保 taskPoints 是数字，并累加到 totalTaskPoints
        const taskPoints = parseFloat(record.taskPoints)
        if (!isNaN(taskPoints)) {
          totalTaskPoints += taskPoints
        }
      }
    })
  })

  // 返回保留两位小数的结果
  return parseFloat(totalTaskPoints.toFixed(2))
}

const urgeState = reactive({
  visible: false,
  current: {}
})

//   催办
function handlerUrge(record) {
  ;(urgeState.visible = true), (urgeState.current = record)
}

//   催办
function confirmUrge() {
  post(`/solution-ppm/api/v2/built-in-system-ppm/action_task/urging/${urgeState.current.actionTaskId}`).then(
    data => {
      if (data.code === 200) {
        message.success(data.message)
        urgeState.visible = false
      } else {
        message.error(data.message)
      }
    }
  )
}

const statuState = reactive({
  visible: false,
  list: []
})
function getTaskStatus(id, type) {
  get(`/solution-ppm/api/v2/built-in-system-ppm/refactoring_task/task_approval_detail/${id}/${type}    `).then(
    data => {
      if (data.code !== 200) {
        message.error(data.message)
        return
      }
      statuState.visible = true
      statuState.list = data.data
    }
  )
}

const getIconStatus = status => {
  if (status === 'finish') {
    return 'finish'
  } else if (status === 'process') {
    return 'process'
  } else {
    return 'error'
  }
}
</script>
<style lang="less" scoped>
.page_root {
  width: 100%;
  height: 100%;
  overflow: auto;
}
.page_root :deep(.@{ant-prefix}-spin-nested-loading),
.page_root :deep(.@{ant-prefix}-spin-container)
{
  height: 100%;
}
.page_root :deep(.@{ant-prefix}-spin-container .@{ant-prefix}-table-wrapper)
{
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
}
.page_root :deep(.@{ant-prefix}-table)
{
  flex: auto;
  overflow: auto;
}
.table-moreBtn_down {
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis; width: 100px;
}

.table-moreBtn_menu :deep(.table-moreBtn_menu-item):hover {
  background: #ebf1ff;
}

/*  表格树结构样式处理，展开按钮层级增加*/
:deep(.@{ant-prefix}-table-row-expand-icon) {
  z-index: 1;
}
/*  表格树结构 由于每个表格项采用自定义组件，使用绝对定位布局，开启树结构导致显示异常，暂时使用层级定位位置 */
:deep(.@{ant-prefix}-table-row-level-1 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
  left: 15px !important;
  width: calc(100% - 15px);
}
:deep(.@{ant-prefix}-table-row-level-2 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
  left: 30px !important;
  width: calc(100% - 30px);
}
:deep(.@{ant-prefix}-table-row-level-3 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
  left: 45px !important;
  width: calc(100% - 45px);
}
:deep(.@{ant-prefix}-table-row-level-4 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
  left: 60px !important;
  width: calc(100% - 60px);
}

/* 穿梭框改变默认样式，为根据组件样式控制左右栏宽度。 */
:deep(.@{ant-prefix}-transfer-list)
{
  height: 100%;
  width: 50%;
}


.top {
  padding: 0 20px;
  height: 64px;
  background-color: #fff;
  margin-bottom: 16px;
  border-bottom: 1px solid #d9d9d9;
}
.task-fill-btn {
  background: #3875ff;
  border-color: #3875ff;
}
.task-no-btn {
  color: #3875ff;
  border-color: #3875ff;
}
.bottom-table :deep(.@{ant-prefix}-table-thead) > tr {
  height: 40px;
}

:deep(.bottom-table .ant3-table-tbody > tr > td) {
  padding: 8px 8px;
}
/* 倒计时 */
.count-down {
  border-radius: 1px;
  background: rgba(255, 123, 0, 0.1);
  color: #ff7b00;
  height: 14px;
  min-width: 52%;
  margin-right: 3px;
  margin-bottom: 3px;
}

/* 全组 */
.weight-num {
  font-weight: 600;
}

.all-group-yes {
  border-radius: 1px;
  background: rgba(48, 191, 120, 0.1);
  color: #30bf78;
  height: 14px;
  width: 52%;
  line-height: 14px;
  margin-right: 3px;
  margin-bottom: 3px;
}

/* 项目经理 */
.pm-score-yes {
  border-radius: 1px;
  background: rgba(48, 191, 120, 0.1);
  color: #30bf78;
  height: 14px;
  line-height: 14px;
  margin-right: 3px;
  width: 45%;
  margin-bottom: 3px;
}

/* 负责人 */
.ower-score-yes {
  border-radius: 1px;
  background: rgba(48, 191, 120, 0.1);
  color: #30bf78;
  height: 14px;
  line-height: 14px;
  width: 50%;
  margin-right: 3px;
}

.all-group-no {
  border-radius: 1px;
  background: rgba(245, 34, 45, 0.1);
  color: #f5222d;
  height: 14px;
  width: 44%;
  line-height: 14px;
  margin-bottom: 3px;
  margin-right: 3px;
}

/* 项目经理 */
.pm-score-no {
  border-radius: 1px;
  background: rgba(245, 34, 45, 0.1);
  color: #f5222d;
  height: 14px;
  line-height: 14px;
  margin-right: 3px;
  width: 45%;
}

/* 负责人 */
.ower-score-no {
  border-radius: 1px;
  background: rgba(245, 34, 45, 0.1);
  color: #f5222d;
  height: 14px;
  line-height: 14px;
  width: 50%;
  margin-right: 3px;
}

.count-down-hover {
  color: #262626;
}

.count-down-hover > p {
  margin: 0;
}
/deep/ .form-content-action .ant3-form-item-label {
  width: 115px;
}

.form-content-action {
  display: inline-block;
  width: calc(100% - 80px);
}
.bottom-table :deep(.@{ant-prefix}-table-thead) > tr {
  height: 40px;
}

.bottom-table :deep(.@{ant-prefix}-table-thead) > tr > th {
  background: #3875ff;
  font-size: 14px;
  font-family: arial, helvetica, 'microsoft yahei';
  font-weight: 600;
  color: #ffffff;
  border-bottom: 1px solid #3875ff;
  padding: 8px 16px;
}
.note-table :deep(.@{ant-prefix}-table-thead) > tr {
  height: 40px;
}

.note-table :deep(.@{ant-prefix}-table-thead) > tr > th {
  background: #3875ff;
  font-size: 14px;
  font-family: arial, helvetica, 'microsoft yahei';
  font-weight: 600;
  color: #ffffff;
  border-bottom: 1px solid #3875ff;
  padding: 8px 16px;
}
.milepost-title {
  height: 25px;
  display: flex;
  line-height: 25px;
  border-left: 4px solid #3875ff;
  justify-content: space-between;
  margin-bottom: 20px;
  font-size: 16px;
  font-weight: 600;
}
.bottom-table {
  background-color: #fff;
  padding: 24px;
}
.wqd-btn,
.yq-btn,
.wc-btn,
.yqwc-btn,
.jxz-btn,
.spz-btn {
  background: #ffffff;
  border-radius: 2px;
  font-family: PingFangSC-Regular;
  font-size: 14px;
  letter-spacing: 0;
  text-align: center;
  line-height: 40px;
  font-weight: 400;
  width: 66px;
  height: 22px;
  line-height: 22px;
  margin: 0 auto;
}

.wc-btn {
  border: 1px solid rgba(48, 191, 120, 1);
  color: #30bf78;
}

.yq-btn {
  border: 1px solid rgba(224, 32, 32, 1);
  color: #e02020;
}

.wqd-btn {
  border: 1px solid rgba(140, 140, 140, 1);
  color: #8c8c8c;
}

.jxz-btn {
  border: 1px solid rgba(56, 117, 255, 1);
  color: #3875ff;
}

.yqwc-btn {
  border: 1px solid rgba(255, 152, 70, 1);
  color: #ff9846;
}

.spz-btn {
  border: 1px solid #00b4ec;
  color: #00b4ec;
}
.bottom-table {
  height: 100%;
}
.extension-color {
  border-radius: 1px;
  background: rgba(89, 89, 89, 0.1);
  color: #595959;
  height: 14px;
  min-width: 51%;
  margin-right: 3px;
  margin-bottom: 3px;
}

.count-down-content {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  padding: 0 5px;
}

.count-down-content > div {
  box-sizing: border-box;
  height: 14px;
  text-align: center;
  line-height: 14px;
  font-size: 12px;
}
.score-title {
  margin: 2px 2px 12px 2px;
  font-family: PingFangSC-Medium;
  font-size: 16px;
  color: #262626;
  letter-spacing: 0;
  font-weight: 500;
}
.score-table :deep(.@{ant-prefix}-table-tbody) tr > td {
  font-size: 14px;
  font-family: arial, helvetica, 'microsoft yahei';
  font-weight: 400;
  color: #595959;
  border-bottom: 1px solid #d9d9d9;
  padding: 8px 16px;
  word-break: break-all;

  .cell-wrapper {
    padding: 0 16px;
  }
}
.score-table :deep(.@{ant-prefix}-table-thead) > tr > th {
  background: #fafafa;
  font-size: 14px;
  font-family: arial, helvetica, 'microsoft yahei';
  font-weight: 600;
  color: #595959;
  border-bottom: 1px solid #d9d9d9;
  padding: 8px 16px;
}
.risk-table :deep(.@{ant-prefix}-table-thead) > tr > th {
  background: #3875ff;
  font-size: 14px;
  font-family: arial, helvetica, 'microsoft yahei';
  font-weight: 600;
  color: #fff;
  padding: 8px 16px;
  border: none;
}

.risk-table :deep(.@{ant-prefix}-table-tbody) tr > td {
  font-size: 14px;
  font-family: arial, helvetica, 'microsoft yahei';
  font-weight: 400;
  color: #262626;
  border-bottom: 1px solid #ebebeb;
  padding: 6px 16px;
  word-break: break-all;

  .cell-wrapper {
    padding: 0 16px;
  }
}
:deep(.ant3-select-selection-item) {
  max-width: 250px;
}

.score-title-first {
  background: rgba(250, 173, 20, 0.1);
  color: #262626;
  height: 36px;
  line-height: 36px;
  padding: 0 16px;
}

.score-title {
  font-size: 16px;
  color: #262626;
  font-weight: 600;
  margin: 18px 0;
}

.score-num {
  font-size: 18px;
  color: #3875ff;
  font-weight: 600;
}

.score-num-red {
  color: #f5222d;
  font-weight: 600;
}

.score-month {
  font-size: 16px;
  color: #262626;
  letter-spacing: 0;
  font-weight: 400;
  margin-bottom: 12px;
}

.month-score {
  font-size: 16px;
  color: #595959;
  letter-spacing: 0;
  font-weight: 400;
  display: inline-block;
  margin-left: 24px;
}

.default-score {
  font-size: 16px;
  color: #262626;
  letter-spacing: 0;
  font-weight: 500;
}
.score-table :deep(.@{ant-prefix}-table-thead) > tr > th {
  background: #3875ff;
  font-size: 14px;
  font-family: arial, helvetica, 'microsoft yahei';
  font-weight: 600;
  color: #fff;
  padding: 8px 16px;
  border: none;
}
.count-down-content {
  cursor: pointer;
}
.tips {
  font-size: 12px;
  color: #8c8c8c;
  letter-spacing: 0;
  margin-top: -15px;
  margin-bottom: 15px;
  margin-left: 115px;
}
.finish-standard {
  display: inlie-block;
  min-width: 70px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

/*样式*/

.title-new-status {
  height: 62px;
  line-height: 36px;
  padding: 0 16px;
  margin-bottom: 16px;
  background-image: url('http://10.40.0.33:9001/file-storage/457843108093009920.png');
  background-size: cover;
  border: 1px solid #3875ff;
  border-radius: 5px;
}

:deep(.ant3-steps-item-container) {
  padding: 0 16px;
}
:deep(.ant3-steps-item-tail::after) {
  margin-left: 12px;
  background-color: #3875ff;
}
:deep(.ant3-steps-item-description) {
  font-size: 12px;
  color: #595959;
  text-align: left;
  line-height: 20px;
  font-weight: 400;
}
:deep(.ant3-steps-item-icon) {
  width: 24px;
  height: 24px;
  line-height: 24px;
  color: #3875ff;
  margin-top: 6px;
}
:deep(.ant3-steps-item-title) {
  height: 28px;
  font-size: 14px;
  color: #262626;
  text-align: left;
  line-height: 22px;
  font-weight: 400;
}
:deep(.ant3-steps-item-process > .ant3-steps-item-container > .ant3-steps-item-icon) {
  background-color: #3875ff;
}
:deep(.ant3-steps-vertical > .ant3-steps-item > .ant3-steps-item-container > .ant3-steps-item-tail::after) {
  background: #3875ff;
}
:deep(.status-step .ant3-steps-vertical > .ant3-steps-item .ant3-steps-item-icon) {
  border-color: #3875ff;
}
:deep(.ant3-steps-item-finish .ant3-steps-item-icon > .ant3-steps-icon) {
  color: #3875ff !important;
}
.task-status-new {
  cursor: pointer;
}
.left-title,
.right-title {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.65);
  letter-spacing: 0;
  text-align: left;
  font-weight: 400;
  height: 31px;
  line-height: 31px;
}
.weight-status {
  font-size: 14px;
  color: #262626;
  letter-spacing: 0;
  font-weight: 500;
}
.batch-line {
  width: 100%;
  border-top: 1px solid #d9d9d9;
  margin: 16px 0;
}
.weight-status-new {
  font-weight: 600;
  color: #262626;
}
.page_root {
  overflow: hidden;
  background-color: #fff;
}
</style>
